<template>
  <div class="container">
    <!-- 筛选行 -->
    <div class="filter-row">
      <el-select
        v-model="currentFamilyId"
        placeholder="请选择家庭"
        size="large"
        class="family-select"
      >
        <el-option
          v-for="f in famList"
          :value="f.id"
          :key="f.id"
          :label="f.name"
        ></el-option>
      </el-select>
    </div>

    <!-- 卡片容器 -->
    <div class="cards-grid">
      <!-- 创建卡片 -->
      <div class="card-item">
        <el-card class="create-card" shadow="hover" @click="createDialogVisible = true">
          <div class="create-card-content">
            <el-icon class="create-icon">
              <el-Plus />
            </el-icon>
            <h2 class="create-text">点击创建标签</h2>
          </div>
        </el-card>
      </div>

      <!-- 标签卡片列表 -->
      <div
        v-for="t in tagList"
        :key="t.id"
        class="card-item"
      >
        <TagCard :data="t" :family-id="currentFamilyId" @refresh="getTagList(currentFamilyId!)"/>
      </div>

      <!-- 无数据提示 -->
      <div class="empty-container" v-if="tagList.length === 0">
        <el-empty description="暂无标签数据" :image-size="200">
          <el-button type="primary" @click="createDialogVisible = true">创建第一个标签</el-button>
        </el-empty>
      </div>
    </div>

    <!-- 创建标签对话框 -->
    <el-dialog
      v-model="createDialogVisible"
      title="新建标签"
      width="500px"
      :draggable="true"
      class="tag-dialog"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="标签名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入标签名称（2-10个字符）"
            clearable
          />
        </el-form-item>
        <el-form-item label="标签描述">
          <el-input
            v-model="formData.description"
            placeholder="请输入标签描述（可选）"
            type="textarea"
            :rows="3"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button color="#1F63FF" @click="add">确定</el-button>
      </template>
    </el-dialog>


  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import TagCard from './TagCard.vue';
import { ElMessage, type FormRules } from "element-plus";
import type { TagCard as TagCardType, TagFamily, TagForm } from "@/api/tag/type.ts";
import { addTag, getTagListByFamilyId } from "@/api/tag";
import { getAllFamily } from "@/api/family";

const createDialogVisible = ref(false);
const famList = ref<TagFamily[]>([]);
const currentFamilyId = ref<number | null>(null);
const tagList = ref<TagCardType[]>([]);

async function getFamilyList() {
  try {
    const res = await getAllFamily();
    famList.value = res.data.map(family => ({
      id: family.id,
      name: family.name
    }));

    if (famList.value.length > 0) {
      currentFamilyId.value = famList.value[0].id;
      await getTagList(currentFamilyId.value);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("获取家庭列表失败");
  }
}

async function getTagList(familyId: number) {
  try {
    const res = await getTagListByFamilyId(familyId);
    tagList.value = res.data;
  } catch (error) {
    console.error(error);
    ElMessage.error("获取标签列表失败");
  }
}

const form = ref();
const formData = reactive<TagForm>({
  name: '',
  description: '',
});

const rules = reactive<FormRules<TagForm>>({
  name: [
    { required: true, message: "请输入标签名称", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
  ]
});

async function add() {
  try {
    await form.value.validate();
    const res = await addTag(formData, currentFamilyId.value!);

    if (res.code === "M000") {
      ElMessage.success("添加成功");
      formData.name = '';
      formData.description = '';
      await getTagList(currentFamilyId.value!);
      createDialogVisible.value = false;
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("添加标签失败");
  }
}

watch(currentFamilyId, (newId) => {
  if (newId) {
    getTagList(newId);
  }
});

onMounted(() => {
  getFamilyList();
});
</script>

<style scoped lang="scss">
.container {
  padding: 24px;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
  box-sizing: border-box;
}

.filter-row {
  margin-bottom: 24px;

  .family-select {
    width: 240px;
  }
}

/* 卡片网格grid布局 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  width: 100%;
}

/* 卡片项样式 */
.card-item {
  width: 100%;
  min-width: 0; /* 防止内容溢出 */
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

/* 创建卡片样式 */
.create-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: 2px dashed var(--el-border-color);
  background-color: var(--el-color-primary-light-9);
  box-sizing: border-box;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--el-color-primary);

    .create-icon {
      color: var(--el-color-primary);
    }

    .create-text {
      color: var(--el-color-primary);
    }
  }

  .create-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;

    .create-icon {
      font-size: 48px;
      color: var(--el-text-color-secondary);
      margin-bottom: 12px;
      transition: color 0.3s;
    }

    .create-text {
      font-size: 16px;
      color: var(--el-text-color-secondary);
      margin: 0;
      transition: color 0.3s;
    }
  }
}

/* 无数据容器 */
.empty-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 60px;
  padding: 40px 0;
  background-color: var(--el-fill-color-light);
  border-radius: 12px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-item {
    height: auto;
  }

  .create-card {
    height: 250px;
  }
}
</style>
